import logo from './logo.svg';
import './App.css';
import React from 'react';
class Ticktok extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			date: new Date().toLocaleTimeString()
		};
	}
	componentDidMount() {
		this.timerID = setInterval(
			()=>{this.tick()},// 重点 这个箭头函数的妙用，可以绑定this，直接设置为:setInterval(this.tick,1000)会出现tick函数内部this绑定的改变
			1000
		);
	}
	componentWillUnmount() {
		clearInterval(this.timerID);
	}
	tick() {
		this.setState({
			date: new Date().toLocaleTimeString()
		});
	}
	render() {
		return (
			<div>
				<h1>Hello, world!</h1>
				<h2>Time is {this.state.date} !!!</h2>
			</div>
		)
	}
}


function App() {
	return (
		<div className="App">
			<header className="App-header">
				<img src={logo} className="App-logo" alt="logo" />
				<Ticktok />
				<a
					className="App-link"
					href="https://reactjs.org"
					target="_blank"
					rel="noopener noreferrer"
				>
					Learn React
        </a>
			</header>
		</div>
	);
}

export default App;
